<template>
    <div id="editor-page-aomao"
        :class="{ 'read-editor': isRead, 'read-editor-mobile': isMobile, 'writing-editor': isWritingPreview, }">
        <!-- <el-button @click="disCon">断开连接</el-button>
    <el-button @click="startCon">开始连接</el-button> -->
        <div class="toolbar-box" v-if="!isRead" v-resize="toolbarResize">
            <am-toolbar v-if="engine && !isRead" :engine="engine" :items="items"></am-toolbar>
        </div>
        <div class="menu-box" :class="[!openMenu && !showOther && !isWritingPreview && !isRead && 'hidden-menu-box']">
            <menuList ref="menuListRef" v-if="!isRead && !isWritingPreview" :isEditor="true" :menuList="indexList"
                :show="openMenu" @close="changeMenuStatus" @clickScroll="scrollNode" class="menu-box-page-no-back">
            </menuList>
        </div>
        <el-tooltip :content="$t('message.tooltips.showMenu')" effect="light" placement="right"
            v-if="!openMenu && !showOther && !isWritingPreview && !isRead">
            <div class="menu-button-box" @click="changeMenuStatus">
                <svg class="menu-icon">
                    <use xlink:href="#keowledge-zhankaimulu"></use>
                </svg>
            </div>
        </el-tooltip>
        <!-- <div></div> -->
        <div v-if="isRead" ref="containerRead" id="contentReadBox" class="content-box" :style="{
            'max-width': $superWidth() ? '1050px' : null, 
            margin: $superWidth() ? '0 auto' : null,
            padding: isTemplate ? '20px 24px' : ''
        }"></div>
        <div class="container-body" :style="{ height: `calc(100% - ${toolbarHeight}px - 16px)` }" v-if="!isRead">
            <div class="editor-content" id="html2Canvas">
                <el-scrollbar ref="amEditorScrollRef" @scroll="bodyScroll">
                    <div class="am-editor-box" ref="containerRef"></div>
                </el-scrollbar>
            </div>
        </div>
    </div>
    <jvs-empty v-if="isRead && !content" style="position:absolute;height:100%;"
        :text="$t('message.empty.nullEditing')"></jvs-empty>
</template>

<script setup lang="ts">
import { ref, unref, reactive, onMounted, nextTick, watch, getCurrentInstance, onBeforeUnmount } from 'vue'
import type { ComponentInternalInstance } from 'vue'
import { useRoute } from "vue-router";
import { saveVersion } from '@/api/version'
import { cards, plugins, pluginConfig, onLoad } from "./config";
import CustomImageUploader from './CustomImageUploader.ts'
import CustomVideoUploader from './CustomVideoUploader.ts'
const $route = useRoute();
import useUserInfoStore from '@/store/userInfo';
const userStore = useUserInfoStore()
import useSocketStore from '@/store/socket';
const lsStore = useSocketStore()
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
import { getShareInfo, preview, saveContent, uploadTemplateCover } from "@/api/common";
import { getTemplateInfo, saveTemplateContent, saveTemplate } from '@/api/template'

import Engine, { View, isMobile } from "@aomao/engine";
import {
    ToolbarPlugin,
} from "@aomao/toolbar-vue";
import AmToolbar from "@aomao/toolbar-vue";
import menuList from '@/views/common/menuList.vue'
import { getStore } from "@/utils/store";
// import * as Y from 'yjs';
// import { withYjs, YjsEditor, YCursorEditor, CursorStateChangeEvent, CursorData } from '@aomao/plugin-yjs';
// import { WebsocketProvider } from '@aomao/plugin-yjs-websocket';
import OTClient from './ot/client'

// import userImg from "@/assets/common/user.png";

const props = defineProps({
    isRead: {
        type: Boolean,
        default: () => {
            return false
        },
    },
    docInfo: {
        type: Object,
        default() {
            return {}
        }
    },
    id: {
        type: String,
        default: () => {
            return ''
        },
    },
    formShare: {
        type: Boolean
    },
    isTemplate: {
        type: Boolean,
        default: false
    },
    isPrivew: {
        type: Boolean,
        default: false
    },
    // 写作预览
    isWritingPreview: {
        type: Boolean,
        default: false
    },
})
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
const emit = defineEmits(['editorLoadingChange', 'setMenuList', 'renderFinish', 'changeLatelySave'])

const engine = ref<any>(null)
const boxWidth = ref('310px')
const content = ref('')
// const options = reactive({})
const items = reactive<any>([
    [{
        type: "collapse",
        groups: [
            {
                items: [
                    "image-uploader",
                    "codeblock",
                    "table",
                    // "file-uploader",
                    "video-uploader",
                    "math",
                    "status",
                ],
            },
        ],
    }],
    ["undo", "redo", "paintformat", "removeformat"],
    ["heading", "fontfamily", "fontsize"],
    ["bold", "italic", "strikethrough", "underline", "moremark"],
    ["fontcolor", "backcolor"],
    ["alignment"],
    ["unorderedlist", "orderedlist", "tasklist", "indent", "line-height"],
    ["link", "quote", "hr"],
])
const indexList = ref([])
// const userInfo = getStore({ name: 'userInfo' })
const containerRead = ref()
const containerRef = ref()
const toolbarHeight = ref(40)
const amEditorScrollRef = ref()
const openMenu = ref(false)
const menuListRef = ref()
const cliclMenuScroll = ref(false)
const bodyScrollTop = ref(0)
const showOther = false
// const otClientObj = ref<any>(null)
const otClientType = {
    Disable_Coll: 0,
    Enable_Coll: 1,
    Romate_Coll: 2
}
const isOnline = ref(true)
onMounted(() => {
    if (props.id) {
        getData()
    }
    window.addEventListener('offline', handleNetworkChange)
})
onBeforeUnmount(() => {
    window.removeEventListener('offline', handleNetworkChange)
    window.removeEventListener('resize', resize)
})
watch(() => props.id, (newV) => {
    if (newV) {
        getData()
    }
})
const resize = () => {
    if (document.body.clientWidth > 1700) {
        boxWidth.value = '310px'
    } else {
        boxWidth.value = ((document.body.clientWidth - 1080) / 2) + 'px'
    }
}
window.addEventListener("resize", resize, false);
function toolbarResize({ height }: { height: number }) {
    toolbarHeight.value = height
}
function getData() {
    if (props.docInfo.type !== 'document_html') return
    engine.value = null
    content.value = ''
    try {
        if (!props.isRead && userStore.access_token && !props.isTemplate) {
            lsStore.INIT(props.id)
        }
    } catch (error) {
        console.log(error)
    }
    let fun = preview
    if (props.formShare) {
        fun = getShareInfo
    }
    if ($route.query.type == 'template' || props.isTemplate) {
        fun = getTemplateInfo
    }
    // console.log(props.docInfo)
    fun(props.id, {
        time: new Date().getTime()
    }).then((res) => {
        if (res.data.code == 0 && res.data.data) {
            if (res.data.data.content && res.data.data.content.startsWith("{") && res.data.data.content.endsWith("}")) {
                let resData = JSON.parse(res.data.data.content).content;
                if (resData && resData.startsWith("[")) {
                    content.value = JSON.parse(resData);
                } else if (resData && resData.startsWith("{")) {
                    content.value = JSON.parse(resData);
                } else {
                    content.value = resData;
                }
            } else {
                content.value = "";
            }
            infoData()
        }
    }).catch(() => {
    });
}
// 测试实例
// const providers = ref()
function infoData() {
    let nodeList: any[] = []
    if (props.isRead) {
        engine.value = new View(
            containerRead.value,
            {
                // 启用的插件
                plugins: plugins,
                lang: locale.value == 'en' ? 'en-US' : locale.value,
                // 启用的卡片
                cards: cards,
                // 所有的卡片配置
                config: pluginConfig,
                lazyRender: false
            },
        );
        onLoad(engine.value)
        engine.value.render(content.value)

        if (!isMobile && !props.isWritingPreview) {
            nodeList = [...engine.value.container[0].childNodes]
            nextTick(() => {
                getNodeList(nodeList, true)
                emit("setMenuList", indexList.value, nodeList)
                if (props.isPrivew) {
                    document.getElementById("contentBoxPriview")!.scrollTop = 0
                }
            })
        }
        emit('renderFinish')
    } else {
        const param = {
            iconFonts: [
                {
                    url: '/jf-knowledge-plugins/fonts/font_1456030_lnqmc6a6ca.woff2',
                    format: 'woff2'
                },
                {
                    url: '/jf-knowledge-plugins/fonts/font_1456030_lnqmc6a6ca.woff',
                    format: 'woff'
                },
                {
                    url: '/jf-knowledge-plugins/fonts/font_1456030_lnqmc6a6ca.ttf',
                    format: 'truetype'
                },
            ],
            lang: locale.value == 'en' ? 'en-US' : locale.value,
            // 启用的插件
            plugins,
            // 启用的卡片
            cards,
            // 所有的卡片配置
            config: {
                ...pluginConfig,
                [CustomImageUploader.pluginName]: {
                    // isRemote: (src: string) => {
                    //     let flag = false
                    //     if(src.indexOf(window.location.host)==-1 && src.indexOf('http')!=-1){
                    //         flag = true
                    //     }
                    //     return flag
                    // },
                    // remote: {
                    //     /**
                    //      * 是否跨域
                    //      */
                    //     crossOrigin: true,
                    //     /**
                    //     * https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials
                    //     */
                    //     withCredentials: true,
                    //     /**
                    //     * 请求头
                    //     */
                    //     headers: { 
                    //         businessId:props.id,
                    //         Authorization: 'Bearer ' + getStore({name:'access_token'})
                    //     },
                    //     /**
                    //     * 上传地址
                    //     */
                    //     action: `/mgr/jvs-auth/upload/url/jvs-public`,
                    //     /**
                    //     * 额外携带数据上传
                    //     */
                    //     data:{
                    //         module:`/jvs-knowledge-ui/aomaoImage/${props.id}`
                    //     },
                    // },
                    file: {
                        action: `/mgr/jvs-auth/upload/jvs-public`,
                        headers: {
                            businessId: props.id,
                            Authorization: 'Bearer ' + getStore({ name: 'access_token' })
                        },
                        data: {
                            module: `/jvs-knowledge-ui/aomaoImage/${props.id}`
                        },
                        limitSize: window.pluginConfig.editorUploadImgSize
                    },
                    parse: (response) => {
                        return {
                            data: response.data.fileLink,
                            result: response.code == 0
                        }
                    }
                },
                [CustomVideoUploader.pluginName]: {
                    action: `/mgr/jvs-auth/upload/jvs-public`,
                    headers: {
                        businessId: props.id,
                        Authorization: 'Bearer ' + getStore({ name: 'access_token' })
                    },
                    data: {
                        module: `/jvs-knowledge-ui/aomaoVideo/${props.id}`
                    },
                    limitSize: window.pluginConfig.editorUploadVideoSize,
                    parse: (response) => {
                        return {
                            data: {
                                url: response.data.fileLink,
                                // url:`/jvs-document-file/${response.data.fileName}`,
                                id: '',
                                cover: '',
                                status: response.code == 0 ? 'done' : 'error'
                            },
                            result: response.code == 0
                        }
                    }
                },
                [ToolbarPlugin.pluginName]: {
                    // config: true,
                    config: [
                        {
                            title: $t('message.text.commonlyUse'),// 可选
                            items: [
                                "image-uploader",
                                "codeblock",
                                "table",
                                // "file-uploader",
                                "video-uploader",
                                "math",
                                "status",
                            ],
                        },
                    ],
                    popup: {
                        items: [
                            ['bold', 'strikethrough', 'fontcolor'],
                            {
                                icon: 'text',
                                items: ['italic', 'underline', 'backcolor', 'moremark'],
                            },
                            [
                                {
                                    type: 'button',
                                    name: 'image-uploader',
                                    icon: 'image',
                                    title: $t('message.beCurrent.image'),
                                },
                                'link',
                                'tasklist',
                                'heading',
                            ],
                            [
                                {
                                    type: 'button',
                                    key: 'writ',
                                    icon: " knowledge-iconfont keowledge-xiezuo-xuanzhong",
                                    // content: '写作助手',
                                    title: $t('message.text.writingAssistant'),
                                    name: $t('message.text.writingAssistant'),
                                    onDisabled: () => {
                                        return (!engineInstance.command.queryEnabled('bold'));
                                    },
                                    onClick: (event, name, engine) => {
                                        // 隐藏popup
                                        let domArr = document.getElementsByClassName("data-toolbar-popup-wrapper")
                                        for (let i = 0; i < domArr.length; i++) {
                                            domArr[i].setAttribute('style', "left: '0px';top: '-9999px';")
                                        }
                                        // 获取选中的文本
                                        let text = document.getSelection().toString();
                                        proxy.$eventBus.$emit('openWrit', {
                                            label: $t('message.text.writing'),
                                            value: 'writ',
                                            icon: "keowledge-xiezuo",
                                            iconActive: 'keowledge-xiezuo-xuanzhong',
                                            searchText: text
                                        })
                                    },
                                }
                            ],
                            {
                                icon: 'more',
                                items: [
                                    {
                                        type: 'button',
                                        name: 'video-uploader',
                                        icon: 'video',
                                    },
                                    {
                                        type: 'button',
                                        name: 'table',
                                        icon: 'table',
                                    },
                                    {
                                        type: 'button',
                                        name: 'math',
                                        icon: 'math',
                                    },
                                    {
                                        type: 'button',
                                        name: 'codeblock',
                                        icon: 'codeblock',
                                    },
                                    {
                                        type: 'button',
                                        name: 'orderedlist',
                                        icon: 'ordered-list',
                                    },
                                    {
                                        type: 'button',
                                        name: 'unordered-list',
                                        icon: 'unordered-list',
                                    },
                                    {
                                        type: 'button',
                                        name: 'hr',
                                        icon: 'hr',
                                    },
                                    {
                                        type: 'button',
                                        name: 'quote',
                                        icon: 'quote',
                                    },
                                ],
                            }]
                    }
                },
            },
            lazyRender: false
        }
        console.log('engine:', param);
        //实例化引擎
        const engineInstance = new Engine(containerRef.value, param);
        onLoad(engineInstance);
        // 监听编辑器值改变事件
        engineInstance.on("change", (e) => {
            nodeList = [...engineInstance.container[0].childNodes]
            getNodeList(nodeList, true)
            if (amEditorScrollRef.value) {
                amEditorScrollRef.value.update()
            }
        });
        const setEngineVal = () => {
            engineInstance.setValue(content.value, () => {
                nodeList = [...engineInstance.container[0].childNodes]
                getNodeList(nodeList, true)
            });
            emit('renderFinish')
        }
        // 是否开启协同
        if (window.pluginConfig.openOTClient != otClientType.Disable_Coll && !props.isTemplate) {
            const otClient = new OTClient(engineInstance)
            let newOtClientUrl = ((window.location.protocol == 'http:' ? 'ws:' : 'wss:') + window.pluginConfig.otClientUrl.substring(window.pluginConfig.otClientUrl.indexOf('://') + 1))
            otClient.connect(`${newOtClientUrl}?uid=${userStore.access_token}&userId=${userStore.userInfo.id}&userName=${userStore.userInfo.realName}`, props.id, content.value)
            otClient.on('statusChange', (e) => {
                emit('renderFinish')
            });
            // 协同连接错误时
            otClient.on('error', (e) => {
                if (e.code == 'CONNECTION_ERROR') {
                    setEngineVal()
                }
            });
        } else {
            setEngineVal()
        }
        // changeMenuStatus()
        engine.value = engineInstance;
        // let contextMenuTime = null
        containerRef.value.addEventListener('contextmenu', (e: { pageX: number; target: any; }) => {
            // if(contextMenuTime) clearTimeout(contextMenuTime)
            const offLeft = document.querySelector('.container-body')!.offsetLeft
            let left = e.pageX - offLeft - 20
            const editorWidth = containerRef.value.clientWidth
            if (editorWidth - left < 242) {
                let parentDom = isOnTableClick(e.target)
                if (parentDom.childNodes[3].style.left) {
                    // contextMenuTime = setTimeout(()=>{
                    // const oldLeft = parseInt(parentDom.childNodes[3].style.left)
                    // if(oldLeft==-99999){
                    parentDom.childNodes[3].style.left = '650px'
                    // }else{

                    // }
                    // console.log(oldLeft,editorWidth,left)
                    // parentDom.childNodes[3].style.left = oldLeft - (242 + editorWidth-left - 32)+'px'
                    // },100)
                }
            }
        })
    }
}
// 判定点击右键是否在表格，并获取表格的同级节点
function isOnTableClick(dom) {
    const classList = dom.getAttribute('class')
    if (dom.getAttribute('class') && classList.indexOf('am-editor-box') != -1) {
        return
    } else if (dom.getAttribute('class') && classList.indexOf('table-wrapper') != -1) {
        return dom
    } else {
        return isOnTableClick(dom.offsetParent)
    }
}
function handleNetworkChange(event) {
    console.log('当前网络状态变化', event.type)
    if (event.type === 'online') {
        // isOnline.value = true;
    } else {
        isOnline.value = false;
    }
}
// 模拟断网情况
// function disCon(){
//     isOnline.value = false
//     providers.value.disconnect()
// }
// function startCon(){
//     providers.value.connect()
// }
function nameByColor(name: string) {
    var temp = [];
    temp.push("#");
    for (let index = 0; index < name.length; index++) {
        temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
    }
    return temp.slice(0, 5).join('').slice(0, 4);
}
function getNodeList(nodeList: Array<any>, isfirst: Boolean) {
    indexList.value = []
    let preNode = '', preItem = null, nextItem = {}
    nodeList.forEach((item: any) => {
        // , 'H3', 'H4', 'H5', 'H6'
        if (['H1', 'H2'].indexOf(item.nodeName.toLocaleUpperCase()) > -1 && item.innerHTML != '<br>' && item.innerHTML != '&nbsp;' && item.innerText != '​​') {
            // 某种情况下会生成不带id带dataId的标签
            if (!item.id) {
                item.id = item.dataset.id
            }
            if (item.nodeName.toLocaleUpperCase() === 'H1') {
                if (item.innerText == '\n' || item.innerText == '​​') return
                preItem = {
                    label: item.innerText,
                    value: item.id,
                    id: item.id,
                    nodeName: item.nodeName.toLocaleUpperCase(),
                    offsetTop: item.offsetTop,
                    children: []
                }
                indexList.value.push(preItem)
            } else {
                nextItem = {
                    label: item.innerText,
                    value: item.id,
                    id: item.id,
                    nodeName: item.nodeName.toLocaleUpperCase(),
                    offsetTop: item.offsetTop,
                    children: []
                }
                preNode = 'H' + (parseInt(item.nodeName.toLocaleUpperCase().replace("H", '')) - 1)
                findLastPush(preNode, item.nodeName.toLocaleUpperCase(), nextItem, indexList.value)
            }
        }
    })
}
function findLastPush(preNode: String, nodeName: String, nextItem: Object, data: Array<any>) {
    let lastData = data[data.length - 1]
    if (lastData?.nodeName.toLocaleUpperCase() === nodeName) {
        data.push(nextItem)
    } else if (lastData?.children.length > 0) {
        findLastPush(preNode, nodeName, nextItem, lastData.children)
    } else {
        if (!lastData || lastData?.nodeName.toLocaleUpperCase().replace('H', '') > nodeName.replace('H', '')) {
            data.push(nextItem)
        } else {
            lastData?.children.push(nextItem)
        }
    }
}
function changeMenuStatus() {
    if (openMenu.value) {
        openMenu.value = false
    } else {
        openMenu.value = true
    }
}
function specMenuStatus(val) {
    openMenu.value = val
}
function bodyScroll({ scrollTop, scrollLeft }) {
    bodyScrollTop.value = scrollTop
    if (cliclMenuScroll.value) return
    let lastId = ''
    if (engine.value.container && engine.value.container.length > 0) {
        engine.value.container[0].childNodes.forEach((item, index) => {
            if (item.innerHTML != '<br>') {
                if (['H1', 'H2'].indexOf(item.nodeName) > -1 && item.offsetTop - bodyScrollTop.value <= 14) {
                    lastId = item.id
                }
            }

        })
    }
    if (lastId) {
        unref(menuListRef)?.setCurrentKey(lastId)
    }
}
function scrollNode(node) {
    cliclMenuScroll.value = true
    amEditorScrollRef.value.setScrollTop(node.offsetTop)
    setTimeout(() => {
        cliclMenuScroll.value = false
    }, 100)
}
function changeEditStatus(val) {
    if (engine.value)
        engine.value.readonly = val
    if (!val)
        openMenu.value = true
}
function handleSave() {
    let fun = saveContent
    if (props.isTemplate) {
        createImg()
        fun = saveTemplateContent
    }
    const viewString = engine.value.getValue(), viewStringHtml = engine.value.getHtml()
    fun(props.id, { content: viewString, contentHtml: viewStringHtml }).then(res => {
        if (res.data.code == 0) {
            proxy.$onePrompt.$oneNotify({
                title: $t('message.message.saveSuccess'),
                type: "success",
                position: "bottom-right",
            });
        }
        emit("changeLatelySave", new Date())
    });
}
function createImg() {
    proxy.$eventBus.$emit('changeSaveLoading', true)
    html2canvas(document.getElementById('html2Canvas'), {
        useCORS: true,
        backgroundColor: null
    }
    ).then((canvas) => {
        const dataUrl = canvas.toDataURL('images/jpg')
        let formData = new FormData();
        formData.append('file', dataURLtoFile(dataUrl, props.docInfo.name))
        formData.append('module', `/jvs-knowledge-ui/${props.docInfo.id}/fileCover`)
        uploadTemplateCover(formData).then(res => {
            saveTemp({
                ...props.docInfo,
                coverUrl: res.data.data.fileLink,
                coverFilePath: res.data.data.fileName,
                coverBucketName: res.data.data.bucketName,
            })
        }).catch(err => {
            proxy.$eventBus.$emit('changeSaveLoading', false)
        })
    })
}
function saveTemp(item) {
    saveTemplate(Object.assign({}, props.docInfo, {
        typeId: item.typeId,
        templateType: 'edit',
        ...item
    })).then(res => {
        if (res.data.code == 0) {
            proxy.$notify({
                title: $t('message.message.saveTemplateSuccess'),
                type: "success",
                position: "bottom-right",
            });
        }
    }).finally(f => {
        proxy.$eventBus.$emit('changeSaveLoading', false)
    })
}
function dataURLtoFile(dataurl, filename) {
    // 获取到base64编码
    const arr = dataurl.split(',')
    // 将base64编码转为字符串
    const bstr = window.atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n) // 创建初始化为0的，包含length个元素的无符号整型数组
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, {
        type: 'image/png'
    })
}
function saveVersionFun() {
    let viewString = engine.value.getValue();
    let viewStringHtml = engine.value.getHtml();
    saveVersion({
        dcId: props.id,
        content: viewStringHtml
    }).then(res => {
        if (res.data.code == 0) {
            proxy.$notify({
                title: $t('message.message.generatedVersionSuccess'),
                type: "success",
                position: "bottom-right",
            });
        }
    })
}
function changeVersionContent(content, type) {
    if (type == 'handleVersion') {
        engine.value.setHtml(content)
    } else {
        setTimeout(() => {
            engine.value.setJsonValue(content)
        }, 1000 * 0.2)
    }
}

function closeShortKey() { }

defineExpose({
    closeShortKey,
    changeEditStatus,
    specMenuStatus,
    handleSave,
    changeVersionContent,
    saveVersionFun
})
</script>
<style lang="scss" scoped>
#editor-page-aomao {
    background-color: #f5f6f7;
    height: 100%;
    width: 100%;

    .toolbar-box {
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;

        .editor-toolbar {
            border: none;

            ::v-deep(.toolbar-button) {
                min-height: 26px;

                .data-icon {
                    font-size: 16px !important;
                }
            }

            ::v-deep(.toolbar-dropdown) {
                font-size: 16px !important;
            }

            ::v-deep(.editor-toolbar-group) {
                border: none !important;
                font-size: 16px !important;
                position: relative;

                &:nth-child(1) {
                    &::before {
                        background-color: transparent;
                    }
                }

                &::before {
                    position: absolute;
                    content: "";
                    width: 1px;
                    height: 16px;
                    top: 50%;
                    left: 0px;
                    transform: translateY(-50%);
                    background-color: #d8d8d8;
                }
            }
        }
    }

    .container-body {
        background-color: transparent;
        // background-color: #fff;
        width: 920px;
        margin: 8px auto;
        // padding: 0px 0px 16px 0px;
        border-radius: 6px 6px 6px 6px;
        overflow: hidden;
        box-sizing: border-box;

        .editor-content {
            width: 100%;
            height: 100%;
            min-height: 100%;
            position: relative;
            border-radius: 6px 6px 6px 6px;
            background-color: #fff;
            box-shadow: 0px 4px 10px 0px rgba(54, 59, 76, 0.15);
            padding: 8px 0px;

            ::v-deep(.el-scrollbar__view) {
                height: 100%;
            }

            ::v-deep(.el-scrollbar__wrap) {
                position: relative;
            }

            .el-scrollbar {
                .el-scrollbar__wrap {
                    position: relative !important;

                    .el-scrollbar__view {
                        height: 100%;

                        .am-editor-box {
                            min-width: 880px;
                            min-height: 100%;
                            width: 880px;
                            margin: 0 auto;
                            min-height: 100%;
                            padding: 16px 16px;
                            box-sizing: border-box;
                        }
                    }
                }
            }
        }
    }

    .menu-box {
        position: absolute;
        left: 0px;
        height: calc(100vh - 88px);
        max-width: 268px;
        z-index: 198;

        .menu-box-page {
            transform: translateX(-100%);
            box-shadow: 0px 6px 5px 1px rgba(54, 59, 76, 0.15);
        }

        ::v-deep(.el-scrollbar__view) {
            height: 100%;

            .el-tree {
                height: 100%;
            }
        }
    }

    .hidden-menu-box {
        transform: translateX(-100%);
    }

    .menu-button-box {
        position: absolute;
        width: 36px;
        height: 36px;
        // background: #F5F6F7;
        border-radius: 0px 6px 6px 0px;
        left: 0px;
        top: 150px;
        z-index: 199;
        box-shadow: 0px 1px 10px 0px rgba(54, 59, 76, 0.15);
        cursor: pointer;

        .menu-icon {
            width: 36px;
            height: 36px;
            cursor: pointer;
        }
    }
}

.read-editor {
    //   width: calc(100% - 310px);
    margin: inherit;
    background-color: #fff !important;

    #contentReadBox {
        padding: 20px 24px 16px 24px;
        max-width: 920px;
        margin: auto;

        ::v-deep(.data-card-block-max>[data-card-element="body"] > [data-card-element="center"]) {
            z-index: 200 !important;
        }

        ::v-deep(.data-table-reader .data-table tr td) {
            padding: 4px 6px !important;
        }

        ::v-deep(.data-video) {
            max-width: 100%;

            .data-video-content {
                max-width: 100%;
            }
        }
    }
}

.read-editor-mobile {
    width: calc(100% - 0px);

    #contentReadBox {
        padding: 20px 20px 40px 20px;
    }
}

.writing-editor {
    width: 100%;
    background-color: #fff !important;

    #contentReadBox {
        padding: 8px 0px 8px 8px;
    }
}
</style>